<style>
    .my-drop-zone { border: dotted 3px lightgray; }
    .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
    .another-file-over-class { border: dotted 3px green; }
</style>
<div class="page-form-ele page" data-ng-controller="uploadExcel">
    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span>&nbsp;&nbsp;&nbsp;&nbsp;数据导入</strong></div>
        <div class="panel-body">
            <div ng-show="uploader.isHTML5" class="row">
                <div style="margin-left: 25px;height: 130px;" nv-file-drop="" uploader="uploader" options="{ url: 'management/interview/uploadExcel' }">
                    <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="col-md-8 well my-drop-zone">
                        <h1>拖放区</h1>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
            <div class="row">
                <div class="col-md-6">
                    <input type="file" nv-file-select="" uploader="uploader" multiple  />
                </div>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th width="50%">文件名</th>
                    <th ng-show="uploader.isHTML5">大小</th>
                    <th ng-show="uploader.isHTML5">进度</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in uploader.queue">
                    <td><strong>{{ item.file.name }}</strong></td>
                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> 上传
                        </button>
                        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> 取消
                        </button>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> 移出
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <h5>上传进度:</h5>
            <div class="progress" style="">
                <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
            </div>
            <!--<div>-->
                <!--<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">-->
                    <!--<span class="glyphicon glyphicon-upload"></span> 全部上传-->
                <!--</button>-->
                <!--<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">-->
                    <!--<span class="glyphicon glyphicon-ban-circle"></span> 全部取消-->
                <!--</button>-->
                <!--<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">-->
                    <!--<span class="glyphicon glyphicon-trash"></span> 全部移出-->
                <!--</button>-->
            <!--</div>-->
            </div>
        </div>
    </section>
    <section data-ng-hide="errorHide" id="data" class="panel panel-default table-dynamic" data-ng-controller="tableCtrl">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span>&nbsp;&nbsp;&nbsp;&nbsp;错误信息提醒</strong></div>
        <table  class="table table-bordered table-striped table-responsive">
            <tbody>
            <tr data-ng-repeat="info in errorInfo">
                <td>{{info}}</td>
            </tr>
            </tbody>
        </table>
    </section>
</div>